import * as React from 'react';
import { useState, useMemo, useRef } from 'react';
import DrawerPro from '@/components/DrawerPro';
import moment from 'moment';
import AutoTable from '@/components/AutoTable';
import {
  factorySelect,
  shopSelectByFactory,
  storeselectionBox,
  sectionSelectByShops,
  userSelect,
  departmentTree,
  roleSelect,
} from '@/services/system';
import PremButton from '@/components/PremButton';
import { TreeSelect } from 'antd';
const tabList = [
  {
    key: '1',
    tab: '正式用户',
  },
  {
    key: '2',
    tab: '用户申请',
  },
];
function Welcome(props) {
  const actionRef = useRef(),
    formRef = useRef();
  const [activeTabKey, setactiveTabKey] = useState('1');
  const [drawer, setdrawer] = useState({
    visible: false,
  });

  const columns = useMemo(() => {
    if (activeTabKey == '1') {
      return [
        {
          title: '基础信息',
          valueType: 'split',
        },
        {
          title: '用户名',
          dataIndex: 'accountName',
          formItemProps: {
            rules: [
              {
                required: false,
                message: '此项为必填项',
              },
            ],
          },
          initialValue: '默认值',
          hideInForm: false,
          convertValue: (value) => {
            return `标题：${value}`;
          },
          transform: (value) => {
            return {
              title: `${value}-转换`,
            };
          },
          search: false,
          render: (text, row) => {
            return <a onClick={() => {}}>{text}</a>;
          },
        },
        {
          title: '姓名',
          dataIndex: 'userName',
          key: 'userId',
          hideInForm: {
            accountName: {
              reverse: ['1', '2', '5'],
            },
            remark: ['3'],
          },
          search: false,
        },
        {
          title: '组织',
          dataIndex: 'departmentName',
          key: 'departmentId',
          valueType: 'Cascader',
          mode: 'multiple',
          fieldProps: {
            placeholder: '请选择',
          },
          formItemProps: {
            rules: [
              {
                required: false,
                message: '此项为必填项',
              },
            ],
          },
          options: {
            path: '/ngic-auth/sysDepartment/query/tree',
            params: {},
          },
        },
        {
          title: '工厂',
          dataIndex: 'factoryName',
          key: 'factoryIdList',
          valueType: 'select',
          fieldProps: {
            placeholder: '请选择',
            showSearch: true,
            mode: 'multiple',
            allowClear: true,
          },
          formItemProps: {
            rules: [
              {
                required: false,
                message: '此项为必填项',
              },
            ],
          },
          options: {
            path: '/ngic-auth/sysFactory/selectionBox',
            params: {},
          },
        },
        {
          title: '负责仓库',
          dataIndex: 'chargeStoreName',
          key: 'storeIdList',
          valueType: 'select',
          fieldProps: {
            placeholder: '请选择',
            showSearch: true,
            mode: 'multiple',
          },
          options: {
            path: '/ngic-auth/sysStore/selectionBox',
            linkParams: {
              factoryIdList: '',
            },
          },
        },
        {
          title: '角色',
          dataIndex: 'roleName',
          key: 'roleIdList',
          valueType: 'select',
          fieldProps: {
            placeholder: '请选择',
            showSearch: true,
            mode: 'multiple',
          },
          options: [{ label: '12', value: '12' }],
        },
        {
          title: '直属领导',
          dataIndex: 'parentName',
          key: 'parentId',
          valueType: 'select',
          fieldProps: {
            placeholder: '请选择',
            showSearch: true,
          },
          options: {
            path: '/ngic-auth/sysUser/queryParentSelectionByUserId',
            params: {},
          },
        },
        {
          title: '额外信息',
          valueType: 'split',
        },
        {
          title: '联系电话',
          dataIndex: 'telephone',
          formItemProps: {
            rules: [
              {
                required: false,
                message: '此项为必填项',
              },
            ],
          },
          search: false,
        },
        {
          title: '邮箱',
          dataIndex: 'mailNo',
          formItemProps: {
            rules: [
              {
                required: false,
                message: '此项为必填项',
              },
            ],
          },
          search: false,
        },
        {
          title: '备注',
          dataIndex: 'remark',
          valueType: 'editor',
          search: false,
          colProps: { span: 24 },
          initialValue: '<p>Hello <b>World!</b></p>',
        },
        {
          title: '上传样式-图片',
          dataIndex: 'uploadImage',
          key: 'uploadImage',
          valueType: 'uploadImage',
          fieldProps: {
            limit: 2,
          },
          formItemProps: {
            rules: [
              {
                required: false,
                message: '此项为必填项',
              },
            ],
          },
        },
        {
          title: '列表可选择',
          valueType: 'formSelectList',
          rowKey: 'id',
          rowName: 'accountName',
          dataIndex: 'lists',
          colProps: {
            xs: 24,
            sm: 24,
          },
          columns: [
            {
              title: '用户名',
              dataIndex: 'accountName',
              colProps: {
                sm: 8,
              },
              editable: false,
            },
            {
              title: '姓名',
              dataIndex: 'userName',
              valueType: 'digit',
              colProps: {
                sm: 8,
              },
            },
            {
              title: '手机号',
              dataIndex: 'telephone',
              colProps: {
                sm: 8,
              },
            },
          ],
          path: '/ngic-auth/sysUser/query/page',
          linkParams: {
            accountName: 'userName',
          }, //params 则不联动
          search: false,
          rowSelection: {
            type: 'checkbox',
            getCheckboxProps: (record) => ({
              disabled: record.accountName == 'GF',
            }),
          },
        },
        {
          title: '操作',
          valueType: 'option',
          width: 150,
          render: (text, row, _, action) => [
            detail(text, row, _, action),
            edit(text, row, _, action),
            remove(text, row, _, action),
          ],
        },
      ];
    } else {
      return [
        {
          title: '用户名',
          dataIndex: 'accountName',
          formItemProps: {
            rules: [
              {
                required: false,
                message: '此项为必填项',
              },
            ],
          },
          initialValue: '默认值',
          hideInForm: false,
          convertValue: (value) => {
            return `标题：${value}`;
          },
          transform: (value) => {
            return {
              title: `${value}-转换`,
            };
          },
          search: false,
          render: (text, row) => {
            return <a onClick={() => {}}>{text}</a>;
          },
        },

        {
          title: '操作',
          valueType: 'option',
          width: 150,
          render: (text, row, _, action) => [
            detail(text, row, _, action),
            edit(text, row, _, action),
            remove(text, row, _, action),
          ],
        },
      ];
    }
  }, [activeTabKey]);

  const reset = (text, row, _, action) => {
    return;
  };

  const detail = (text, row, _, action) => {
    return (
      <PremButton
        btn={{
          size: 'small',
          type: 'link',
          onClick: () => {
            setdrawer((s) => ({
              ...s,
              visible: true,
              item: row,
              title: '详情',
              val: 'detail',
              title: `${row.userName}的详细信息`,
            }));
          },
        }}
      >
        详情
      </PremButton>
    );
  };

  const edit = (text, row, _, action) => {
    return (
      <PremButton
        btn={{
          size: 'small',
          onClick: () => {
            setdrawer((s) => ({
              ...s,
              visible: true,
              item: row,
              title: '编辑',
              val: 'edit',
            }));
          },
        }}
      >
        编辑
      </PremButton>
    );
  };

  const remove = (text, row, _, action) => {
    return (
      <PremButton
        pop={{
          title: '是否删除该用户?',
          okText: '确认',
          cancelText: '取消',
          onConfirm: () => {
            alert(0);
          },
        }}
        btn={{
          size: 'small',
          type: 'danger',
        }}
      >
        删除
      </PremButton>
    );
  };

  return (
    <div style={{ position: 'relative' }}>
      <AutoTable
        pagetitle="用户列表"
        columns={columns}
        activeTabKey={activeTabKey}
        path={
          activeTabKey == '1'
            ? '/ngic-auth/sysUser/query/page'
            : '/ngic-auth/sysAccountApply/queryList'
        }
        actionRef={actionRef}
        onTabChange={setactiveTabKey}
        tabList={tabList}
        pageextra={'add'}
        resizeable={true}
        addconfig={{
          // access: 'sysDepartment_save',
          btn: {
            disabled: false,
            onClick: () => {
              setdrawer((s) => ({
                ...s,
                visible: true,
                item: null,
                title: '新增',
                val: 'add',
              }));
            },
          },
        }}
        nocardtab={true}
      />

      <DrawerPro
        fields={columns}
        detailpath="/ngic-auth/sysUser/query/detail"
        params={{ id: drawer?.item?.id }}
        formRef={formRef}
        placement="right"
        onClose={() => {
          setdrawer((s) => ({
            ...s,
            visible: false,
          }));
        }}
        {...drawer}
      />
    </div>
  );
}

export default Welcome;
